<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/icon.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/datagrid.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/themes/default/easyui.css">
    <link rel="stylesheet" href="jquery-easyui-1.7.0/demo/demo.css">
</head>
<body>
<table id="datagrid_ky">

</table>
<!--按钮组-->
<div id="buttons_11">
    <a href="#">添加</a>
</div>
<!--按钮组2-->
<div id="buttons_12">
    <a href="#">提交</a>
</div>
<!--按钮组3-->
<div id="buttons_13">
    <a href="#">修改</a>
</div>
<!--对话框-->
<div id="dialog_11">
    <form method="post" action="/ky/addKy" id="form_dialog_11">
        <table>
            <tr>
                <th>类型</th>
                <th><input type="text" name="etype" id="etype"></th>
                <th>运动名称</th>
                <th><input type="text" name="ename" id="ename"></th>
            </tr>
            <tr>
                <th>状态</th>
                <th><input type="text" name="estatus" id="estatus"></th>
            </tr>
        </table>
    </form>
</div>
<div id="dialog_12">
    <form method="post" action="/ky/updateKy" id="form_dialog_12">
        <table>
            <tr>
                <th>id</th>
                <th><input type="text" name="eid" id="eid1"></th>
                <th>类型</th>
                <th><input type="text" name="etype" id="etype1"></th>

            </tr>
            <tr>
                <th>运动名称</th>
                <th><input type="text" name="ename" id="ename1"></th>
                <th>状态</th>
                <th><input type="text" name="estatus" id="estatus1"></th>
            </tr>
        </table>
    </form>
</div>
</body>
<script src="jquery-easyui-1.7.0/jquery.min.js"></script>
<script src="jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<script src="jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
<script>
    var ky = {
        opt: function (value, row, index) {
            return '<a href="#" class="ky_remove_btn">删除</a><a href="#" class="ky_showupdate_btn">修改</a>'
        },
        showStatus: function (value, row, index) {
            if (value == '1') {
                return "正常";
            } else {
                return "被冻结";
            }
        }
    }
    $("#datagrid_ky").datagrid({
        title: '康娱管理',
        url: 'http://localhost:8080/ky/findKy',
        width: 1300,
        height: 600,
        columns: [[
            {field: 'eid', width: 220, title: '编号'},
            {field: 'etype', width: 220, title: '运动类型'},
            {field: 'ename', width: 220, title: '运动名称'},
            {field: 'estatus', width: 220, title: '状态', formatter: ky.showStatus},
            {field: 'hh', width: 220, title: '操作', formatter: ky.opt},
        ]],
        striped: true,//实现斑马线效果
        rownumbers: true,//显示行号
        pagination: true,
        toolbar: "#buttons_11",
        onLoadSuccess: function () {
            $(".ky_remove_btn").linkbutton({
                iconCls: 'icon-remove',
                onClick: function () {
                    var eid = $(this).parent().parent().parent().children().eq(0).find("div").text();
                    console.log(eid);
                    $.post("/ky/delByEid", {"eid": eid}, rs => {
                        if (rs.code == 200) {
                            $.messager.show({
                                title: '提示信息',
                                msg: rs.data
                            })
                        }
                        ;
                        $("#datagrid_ky").datagrid('reload');
                    })
                }
            });
            $(".ky_showupdate_btn").linkbutton({
                iconCls: 'icon-edit',
                onClick: function () {
                    $("#dialog_12").dialog({
                        closed:false
                    });
                    var eid = $(this).parent().parent().parent().children().eq(0).find("div").text();
                    $("#form_dialog_12").form('load',"http://localhost:8080/ky/findByEid?eid="+eid);
                }
            });

        }
    });
    $("#buttons_11 a:contains(添加)").linkbutton({
        iconCls: 'icon-add',
        onClick: function () {
            $("#dialog_11").dialog({
                closed: false
            })
        }
    });
    $("#buttons_13 a:contains(修改)").linkbutton({
        iconCls:'icon-edit',
        onClick:function(){
            $("#form_dialog_12").form('submit');
        }
    });
    $("#form_dialog_12").form({
        success:function(rs){
            var json = JSON.parse(rs);
            if (json.code == 200){
                $.messager.show({
                    title:'提示信息',
                    msg:json.data
                });
                $("#form_dialog_12").form('clear');
                $("#dialog_12").dialog({
                    closed:true
                });
                $("#datagrid_ky").datagrid('reload');
            }
        }
    })
    $("#dialog_11").dialog({
        title: '添加',
        width: 520,
        height: 150,
        modal: true,
        closed: true,
        buttons: "#buttons_12"
    });
    $("#dialog_12").dialog({
        title: '修改',
        width: 520,
        height: 150,
        modal: true,
        closed: true,
        buttons: "#buttons_13"
    })
    $("#buttons_12").linkbutton({
        iconCls: 'icon-ok',
        onClick: function () {
            $("#form_dialog_11").form('submit');
        }
    });
    $("#form_dialog_11").form({
        success: function (rs) {
            var json = JSON.parse(rs);
            if (json.code == 200) {
                $.messager.show({
                    title: '提示信息',
                    msg: json.data
                });
                //对话框关闭
                $("#dialog_11").dialog({
                    closed: true
                });
                $("#form_dialog_11").form('clear');
                //datagrid数据重新加载
                $("#datagrid_ky").datagrid('reload');
            }
        }
    })
</script>
</html>